<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726301_tqj1eaqbnvf.css">
    <link rel="stylesheet" href="../style/swiper-bundle.min.css">
    <link rel="stylesheet" href="../style/public.css">
    <link rel="stylesheet" href="./css/home.css">
    <title>首页</title>
</head>

<body>
    <header class="bab w100p fixed pt-10 pl-10 pr-10">
        <div class="search rel">
            <input class="search-input w100p h30" type="text" placeholder="问界|凯迪拉克">
            <i class="iconfont icon-sousuo so abs f18"></i>
        </div>
        <div class="nav-top h45 fca">
            <span class="f16" onclick="navClick(this)">热门</span>
            <span class="f16 active" onclick="navClick(this)">推荐</span>
            <span class="f16" onclick="navClick(this)">新能源</span>
            <span class="f16">本地</span>
        </div>
    </header>
    <div style="height: 85px;"></div>

    <!-- 推荐内容 -->
    <div class="popular ">
        <div class="nav-bottom fca bafff pt-10 pb-10">
            <a v-for="(navItem, navIndex) in navList" :key="navItem.id" class="fcc fdc" :href="navItem.herf">
                <i :class="['iconfont f26 c4b3',navItem.icon]"></i>
                <span>{{ navItem.name }}</span>
            </a>
        </div>

        <div class="swiper mySwiper pt-10 pl-10 pr-10 bafff">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./image/SU7.png" alt=""></div>
                <div class="swiper-slide"><img src="./image/swiper2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./image/swiper3.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <div class="energy-content pl-10 pr-10  bafff">
            <div v-for="(item, index) in list" :key="item.id" class="cont-item pt-10 pb-10 bbs">
                <a :href="'./user-essay.html?id='+item.id">
                    <div class="fl fdc jcsb mb-5">
                        <p class="f18 lh13 ovh2">{{item.h1}}</p>
                    </div>
                    <!-- img -->
                    <div v-if="item.url1" v-for="(item, index) in item.imgUrl" :key="index" class="fl cont-img">
                        <img class="mr-5" :src="item.url1" alt="">
                        <img class="mr-5" :src="item.url2" alt="">
                        <img :src="item.url3" alt="">
                    </div>
                    <!-- sp -->
                    <div v-if="item.videoUrl" class="fl rel">
                        <video class="video-img" :src="item.videoUrl" alt=""></video>
                        <div class="video-btn abs">
                            <i class="iconfont icon-bofang cfff"></i>
                        </div>
                        <div class="video-time abs fwb">{{ item.duration }}</div>
                    </div>
                    <div class="mt-5">
                        <span>{{ item.name }}</span>
                        <span>{{ item.browse }}点赞</span>
                        <span>{{ item.time }}</span>
                    </div>
                </a>
            </div>
        </div>

    </div>

    <!-- 热门内容 -->
    <div class="recom  dsn">
        <div class="nav-bottom fca bafff pt-10 pb-10">
            <a v-for="(navItem, navIndex) in navList" :key="navItem.id" class="fcc fdc" :href="navItem.herf">
                <i :class="['iconfont f26 cb54',navItem.icon]"></i>
                <span>{{ navItem.name }}</span>
            </a>
        </div>

        <div class="news pa10 pt-20 bafff">
            <div class="news-top fcb">
                <div class="fcc">
                    <p class="f16 fwb mr-5">热搜</p>
                    <p>按实时热搜排序</p>
                </div>
                <div class="fcc">
                    <p class="mr-3">完整榜单</p>
                    <i class="iconfont icon-bofang f8"></i>
                </div>
            </div>
            <div class="news-list mt-20">
                <div v-for="(newsItem, newsIndex) in newsList" :key="newsItem.id" class="news-item mt-10 fcb">
                    <div class="fcc">
                        <span class="fwb f16 cb54">{{ ++newsIndex }} 、</span>
                        <p class="f14">{{ newsItem.content }}</p>
                    </div>
                    <div>
                        <p>{{ newsItem.heat }}万</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="energy-content  pl-10 pr-10 mt-10 bafff">
            <div v-for="(item, index) in list" :key="item.id" class="cont-item pt-10 pb-10 bbs">
                <a :href="'./user-essay.html?id='+item.id">
                    <div class="fl fdc jcsb mb-5">
                        <p class="f18 lh13 ovh2">{{item.h1}}</p>
                    </div>
                    <!-- img -->
                    <div v-if="item.url1" v-for="(item, index) in item.imgUrl" :key="index" class="fl cont-img">
                        <img class="mr-5" :src="item.url1" alt="">
                        <img class="mr-5" :src="item.url2" alt="">
                        <img :src="item.url3" alt="">
                    </div>
                    <!-- sp -->
                    <div v-if="item.videoUrl" class="fl rel">
                        <video class="video-img" :src="item.videoUrl" alt=""></video>
                        <div class="video-btn abs">
                            <i class="iconfont icon-bofang cfff"></i>
                        </div>
                        <div class="video-time abs fwb">{{ item.duration }}</div>
                    </div>
                    <div class="mt-5">
                        <span>{{ item.name }}</span>
                        <span>{{ item.browse }}点赞</span>
                        <span>{{ item.time }}</span>
                    </div>
                </a>
            </div>
        </div>

    </div>

    <!-- 新能源内容 -->
    <div class="energy dsn">
        <div class="nav-bottom fca bafff pt-10 pb-10">
            <a v-for="(navItem, navIndex) in navList" :key="navItem.id" class="fcc fdc" :href="navItem.herf">
                <i :class="['iconfont f26 c309',navItem.icon]"></i>
                <span>{{ navItem.name }}</span>
            </a>
        </div>

        <div  class="energy-hot pa10 bafff fl">
            <div class="hot-l">
                <h3 class="f16">为您推荐</h3>
                <div v-for="(itemHot, indexHot) in hotList.hot" class="fcb mt-20">
                    <img class="energy-img" :src="itemHot.imgUrl" alt="">
                    <div class="ovh">
                        <p class="ovh">{{ itemHot.name }}</p>
                        <span class="f10 cbase">{{ itemHot.price }}万起</span>
                    </div>
                    <a class="ener fls0" href="">咨询</a>
                </div>
            </div>
            <div class="hot-r ml-10 pb-10">
                <div class="top mb-10 pa10">
                    <span class=" fcb">
                        <p class="f14">品牌</p>
                        <p class="c999 fcc">更多<i class="iconfont icon-bofang f8"></i></p>
                    </span>
                    <div class="fcb mt-10">
                        <li v-for="(itemBrand, indexBrand) in hotList.hotBrand"  class="fcc fdc">
                            <img :src="itemBrand.imageUrl" alt="">
                            <span>{{ itemBrand.name }}</span>
                        </li>
                    </div>
                </div>
                <div class="bot pa10">
                    <h3 class="f14">条件</h3>
                    <div class="fcb mt-10">
                        <span v-for="(conditionItem, conditionIndex) in hotList.hotCondition" :key="index">{{ conditionItem.name }}</span>
                    </div>
                    <div class="fcc mt-10 botbot">更多条件</div>
                </div>
            </div>
        </div>

        <div class="energy-content energyend pl-10 pr-10 mt-10 bafff">
            <div v-for="(item, index) in list" :key="item.id" class="cont-item pt-10 pb-10 bbs">
                <a :href="'./user-essay.html?id='+item.id">
                    <div class="fl fdc jcsb mb-5">
                        <p class="f18 lh13 ovh2">{{item.h1}}</p>
                    </div>
                    <!-- img -->
                    <div v-if="item.url1" v-for="(item, index) in item.imgUrl" :key="index" class="fl cont-img">
                        <img class="mr-5" :src="item.url1" alt="">
                        <img class="mr-5" :src="item.url2" alt="">
                        <img :src="item.url3" alt="">
                    </div>
                    <!-- sp -->
                    <div v-if="item.videoUrl" class="fl rel">
                        <video class="video-img" :src="item.videoUrl" alt=""></video>
                        <div class="video-btn abs">
                            <i class="iconfont icon-bofang cfff"></i>
                        </div>
                        <div class="video-time abs fwb">{{ item.duration }}</div>
                    </div>
                    <div class="mt-5">
                        <span>{{ item.name }}</span>
                        <span>{{ item.browse }}点赞</span>
                        <span>{{ item.time }}</span>
                    </div>
                </a>
            </div>
        </div>

    </div>

    <div class="fcc fdc h50">
        <p>没有更多内容了</p>
        <p>去看看其他内容吧</p>
    </div>

    <div style="height: 50px;"></div>
    <footer class="footer w100p bafff fixed h50">
        <div  class="footer-item fl aic jcsa">
            <a v-for="(item, index) in list" :key="item.id" :class="['footer-item fcc fdc', item.id === 1 ? 'cba' : '']" :href="item.herf">
                <i :class="['iconfont f22',item.icon]"></i>
                <span class="mt-5">{{ item.name }}</span>
            </a>
        </div>
    </footer>
    <script src="../js/vue2.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="./js/home.js"></script>
    <script src="../js/common.js"></script>
</body>

</html>